<template>
	<view class="content">
		<view class="cont-box">
			<view class="item">
				<view class="title">
					头像
				</view>
				<view class="value">
					<button class="avatar-wrapper" style="margin-right: 30rpx;" open-type="chooseAvatar"
						@chooseavatar="onChooseAvatar">
						<image class="avatar" :src="avatarUrl?avatarUrl:'../../static/img/user-mr.png'"></image>
					</button>
					<u-icon class="icon" name="arrow-right" color="#797979" size="14"></u-icon>
				</view>
			</view>
			<view class="item mar-t30">
				<view class="title">
					昵称
				</view>
				<view class="value">
					<input class="input" type="nickname" style="text-align: right;margin-right: 30rpx;"
						v-model="userInfo.nickName" placeholder="请输入昵称" border="none"></input>
					<u-icon class="icon" name="arrow-right" color="#797979" size="14"></u-icon>
				</view>
			</view>
			<view class="item mar-t30">
				<view class="title">
					电话
				</view>
				<view class="value">
					<input class="input" type="number" style="text-align: right;margin-right: 30rpx;"
						v-model="userInfo.userName" placeholder="请输入电话" border="none"></input>
					<u-icon class="icon" name="arrow-right" color="#797979" size="14"></u-icon>
				</view>
			</view>






		</view>
		<view class="saveBtn" @click="submitBtn">
			保存
		</view>


	</view>
</template>

<script>
	import {
		getUserInfo,
		putUserInfo
	} from '@/api/common'
	import {
		baseURL,
		imgURL
	} from '@/api/config'
	export default {
		data() {
			return {
				userInfo: {
					avatar: '',
					nickName: '',
					userName: '',
					openId: '',
					id: ''
				},
				avatarUrl: '',


			};
		},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				let info = uni.getStorageSync('userInfo')
				this.$nextTick(() => {
					this.initUserInfo(info.id)
				})
			}

		},
		onReady() {

		},
		methods: {
			submitBtn() {
				console.log(this.userInfo)
				console.log(this.avatarUrl)
				let data = this.userInfo
				if (this.avatarUrl) {
					data.avatar = this.avatarUrl
				}
				// if (!data.userName) {
				// 	uni.$u.toast(`请输入电话`)
				// 	return
				// }
				// let phone = data.userName
				// let phoneReg = /^1[3456789]\d{9}$/; // 
				// if (!phoneReg.test(phone)) {
				// 	uni.$u.toast(`手机号码格式不正确`)
				// 	return false
				// }
				console.log(data)
				putUserInfo(data).then(res => {
					if (res.code == 200) {
						uni.$u.toast(`操作成功`)
						setTimeout(() => {
							uni.navigateBack()
						}, 1200)
					}
				})
			},
			async initUserInfo(id) {
				let res = await getUserInfo(id)
				if (res.code == 200) {
					this.userInfo = res.data
					this.avatarUrl = res.data.avatar ? res.data.avatar : ''
				}
			},
			onChooseAvatar(e) {
				let _this = this
				const {
					avatarUrl
				} = e.detail
				uni.showLoading({
					title: '加载中...'
				});
				// this.avatarUrl = avatarUrl
				console.log(avatarUrl)
				let token = uni.getStorageSync('userToken') || '';
				uni.uploadFile({
					url: baseURL + '/common/upload/', //   //
					filePath: avatarUrl, // 必须是完整路径
					name: 'files',
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
					success: (res) => {
						uni.showToast({
							title: "上传成功",
							icon: 'none'
						})
						const data = JSON.parse(res.data);
						if (data.code == 200) {
							console.log('上传成功URL:', data.data); // 调试用 
							_this.avatarUrl = imgURL + data.data
						} else {

						}

					},
					complete(e) {

					}
				});
				uni.hideLoading();

			},

			changePhoto() {
				let _self = this;
				let token = uni.getStorageSync('userToken') || '';
				let upUri = baseURL + '/common/upload';
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;

					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.cont-box {
			padding: 30rpx;
			background: #fff;
			border-radius: 20rpx;
		}
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx 0;
		background-color: #fff;
		font-family: SF Pro Display, SF Pro Display;
		font-weight: bold;
		font-size: 28rpx;
		color: #4C604E;

		.value {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			.headImg {
				width: 103rpx;
				height: 103rpx;
				border-radius: 50%;
			}

			.icon {
				margin-left: 15rpx;
			}
		}
	}

	.avatar-wrapper {
		background: none;
		border: none;
		padding: 0;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;

		.avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
	}



	.border {
		border-bottom: 0.5rpx solid #C8C8C8;
	}

	.saveBtn {
		width: 90%;
		height: 88rpx;
		color: #fff;
		background: #006C04;
		border-radius: 120rpx;
		font-weight: bold;
		font-family: SF Pro Display, SF Pro Display;
		font-weight: 400;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: 200rpx;

	}
</style>